<!---------------- 在 templates 目录下创建 base.html ----------------->
<!-- templates/base.html -->
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧农业网</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-success">
        <div class="container">
            <a class="navbar-brand" href="/">智慧农业</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="/">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="/products/">农产品</a></li>
                    <li class="nav-item"><a class="nav-link" href="/news/">农业资讯</a></li>
                    <li class="nav-item"><a class="nav-link" href="/about/">关于我们</a></li>
                    <li class="nav-item"><a class="nav-link" href="/contact/">联系我们</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 内容块 -->
    {% block content %}{% endblock %}

    <!-- 页脚 -->
    <footer class="bg-dark text-white mt-5">
        <div class="container py-4">
            <div class="row">
                <div class="col-md-6">
                    <h5>联系我们</h5>
                    <p>地址：XX省XX市农业科技园</p>
                    <p>电话：400-123-4567</p>
                </div>
                <div class="col-md-6">
                    <p class="text-end">&copy; 2023 智慧农业网</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

<!---------------- 首页模板 templates/index.html ----------------->
{% extends "base.html" %}

{% block content %}
<section class="hero-banner bg-light py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="display-4">智慧农业解决方案</h1>
                <p class="lead">科技赋能传统农业，助力乡村振兴</p>
            </div>
            <div class="col-md-6">
                <img src="{% static 'images/farm.jpg' %}" alt="农田" class="img-fluid rounded">
            </div>
        </div>
    </div>
</section>

<section class="services py-5">
    <div class="container">
        <h2 class="text-center mb-5">我们的服务</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">智慧种植</h5>
                        <p class="card-text">物联网监控系统，精准控制温湿度</p>
                    </div>
                </div>
            </div>
            <!-- 添加更多服务卡片 -->
        </div>
    </div>
</section>

<section class="products py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5">特色农产品</h2>
        <div class="row g-4">
            <!-- 假数据示例 -->
            <div class="col-md-4">
                <div class="card h-100">
                    <img src="{% static 'images/product1.jpg' %}" class="card-img-top" alt="有机大米">
                    <div class="card-body">
                        <h5 class="card-title">有机大米</h5>
                        <p class="card-text">产地：黑龙江五常</p>
                        <p class="text-success fw-bold">¥ 12.8/斤</p>
                    </div>
                </div>
            </div>
            <!-- 添加更多产品 -->
        </div>
    </div>
</section>
{% endblock %}

<!---------------- 静态文件 static/css/style.css ----------------->
/* 自定义样式 */
:root {
    --primary-color: #28a745;
    --secondary-color: #ffc107;
}

.hero-banner {
    background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), 
                url('../images/bg-pattern.png');
}

.card {
    transition: transform 0.3s;
}
.card:hover {
    transform: translateY(-5px);
}

.img-thumbnail {
    border-radius: 15px;
}

.btn-agro {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 25px;
}
.btn-agro:hover {
    background-color: #218838;
}

/* 产品图片统一尺寸 */
.product-img {
    height: 200px;
    object-fit: cover;
}